<template>
	<view>
		<view class="chongzhi-top">
			<view class="h1">充值金额</view>
			<view class="input webkit">
				<text>¥</text>
				<input type="number" value="" @input="number" @blur="number" class="flex"/>
			</view>
			<view class="subtitle" v-cloak>当前积分：{{res.credit}}</view>
		</view>
		<radio-group style="background: #fff;margin-top: 20upx;" @change="radioChange">
			<label class="uni-list-cell uni-list-cell-pd">
				<view>
					<radio value="wechat" checked="true" />
				</view>
				<view style="width: 100%;padding-left: 10upx;">微信</view>
			</label>
			<label class="uni-list-cell uni-list-cell-pd">
				<view>
					<radio value="bank" />
				</view>
				<view style="width: 100%;padding-left: 10upx;">银行转账</view>
			</label>
		</radio-group>
		<view class="btn">
			<button type="primary" :disabled="disabled" @click="submit">下一步</button>
		</view>
		<uni-popup :show="showPopupMiddle" :type="popType" v-on:hidePopup="hidePopup">
			<view class="uni-common-mt uni-helllo-text uni-center" v-if="type == 'bank'" style="margin-top: 0;">
				<view v-cloak>{{bankname}}</view>
				<view v-cloak>{{cardname}}</view>
				<view v-cloak>{{cardnumber}}</view>
			</view>
			<view class="uni-center" style="font-size:0;" v-else>
				<image class="image" style="width:680upx;height:934upx;" mode="widthFix" :src="img" />
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import uniPopup from '../../components/uni-popup.vue';
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				res:[],
				popType: 'middle',
				showPopupMiddle: false,
				disabled:'disabled',
				img:' ',
				type:'wechat',
				openid:''
			};
		},
		onLoad:function(){
			uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			});
		},methods:{
			setAjax(){
				uni.request({
					url: 'http://m.wpweipin.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=member.recharge&app=1',
					method: 'POST',
					data: {'openid':this.openid},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						uni.hideLoading()
						this.res = res.data
					this.img = res.data.wechat
					this.sktype = res.data.realwechat
						console.log(res.data)
					},
					fail: () => {},
					complete: () => {}
				});
			},
			number(e){
				if(e.detail.value > 0){
					this.disabled = false
				}
				this.money = e.detail.value
			},
			radioChange(e){
				this.type = e.detail.value
				if(e.detail.value == 'bank'){
					this.sktype = this.res.bank
					var b =this.res.bank.split(",")
					this.bankname = b[0]
					this.cardname = b[1]
					this.cardnumber = b[2]
				}else if(e.detail.value == 'alipay'){
					this.sktype = this.res.realalipay
					this.img = this.res.alipay
				}else if(e.detail.value == 'wechat'){
					this.sktype = this.res.realwechat
					this.img = this.res.wechat
				}
			},
			submit(){
				var data = {
					'openid':this.openid,
					'log_no':this.res.log_no,
					'type':this.type,
					'sktype':this.sktype,
					'money':this.money
				}
				uni.showModal({
					content: "订单号："+this.res.log_no+" 已复制。您的充值订单已经生成，请务必将此订单号粘贴进付款备注中，付款完成之后平台将尽快为您充值",
					confirmText: "确定",
					cancelText: "取消",
					success: res => {
						if(res.confirm){
				console.log(data)
							uni.request({
								url: 'http://m.wpweipin.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=member.recharge.c2c&app=1',
								method: 'POST',
								data: data,
								header:{'Content-Type':'application/x-www-form-urlencoded'},
								success: res => {
									if(res.data.error == 0){
										console.log(res.data)
										this.showMiddlePopup()
									}
								},
								fail: () => {},
								complete: () => {}
							});
						}
					},
				})
			},
			hidePopup: function() {
				this.showPopupMiddle = false;
				this.showPopupTop = false;
				this.showPopupBottom = false;
			},
			//展示居中 popup
			showMiddlePopup: function() {
				this.hidePopup();
				this.popType = 'middle';
				this.showPopupMiddle = true;
			}
		}
	}
</script>

<style>.uni-popup-middle{height:auto;}.chongzhi-top{background:#fff;border-top:1px solid #eaeaea;}.h1{font-weight:initial;font-size:28upx;padding:20upx 30upx;}.input{padding:0 30upx;}.input text{line-height:80upx;font-size:40upx;}.input input{height:80upx;line-height:80upx;display:block;-webkit-box-flex:1;border:0;font-size:60upx;}.subtitle{padding:20upx 30upx;border-top:1px solid #eaeaea;}.uni-list-cell:last-child:after{display:none;}.btn{padding:30upx;}</style>